# Button

## Installation

`npm i @snack-uikit/button`

## TODO

- Add transition/animation
- Fix onClick type (button & anchor)
- R&D two icons in a button
- R&D type prop

## Example

```typescript jsx
import { ButtonFilled, ButtonFunction, ButtonSimple } from "@snack-uikit/button";
import { Counter } from "@snack-uikit/counter";
import { DaySVG } from "@snack-uikit/icons";

<ButtonFilled
  label='Navigate'
  onClick={() => navigate()}
  icon={<DaySVG />}
  size='m'
  appearance='primary'
  href='https://cloud.ru/'
  target='_blank'
  disabled={true}
  loading={true}
/>

<ButtonSimple
  label='Submit'
  onClick={() => sendForm()}
/>

const CounterProps = { 
  value: 7, 
  appearance: 'red',
}

<ButtonFunction
  label='Unread Messages'
  onClick={() => openMessages()}
  counter={CounterProps}
/>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## ButtonFilled
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| label | `string` | - | Текст кнопки |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"destructive"` | primary | Внешний вид кнопки |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |
## ButtonSimple
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| label | `string` | - | Текст кнопки |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"destructive"` | neutral | Внешний вид кнопки |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |
## ButtonOutline
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| label | `string` | - | Текст кнопки |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"destructive"` | primary | Внешний вид кнопки |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |
## ButtonTonal
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| label | `string` | - | Текст кнопки |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"destructive"` | primary | Внешний вид кнопки |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |
## ButtonFunction
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| iconPosition | enum IconPosition: `"before"`, `"after"` | after | Позиция иконки |
| label | `string` | - | Текст кнопки |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"destructive"` | neutral | Внешний вид кнопки |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
| counter | `CounterInButtonProps` | - | Пропсы каунтера в кнопке |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |
## ButtonElevated
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href | `string` | - | Ссылка |
| target | `HTMLAttributeAnchorTarget` | _blank | HTML-аттрибут target |
| className | `string` | - | CSS-класс |
| disabled | `boolean` | - | Флаг неактивности компонента |
| icon | `ReactElement` | - | Иконка |
| loading | `boolean` | - | Флаг состояния загрузки |
| onClick | `MouseEventHandler<HTMLElement>` | - | Колбек обработки клика |
| onKeyDown | `KeyboardEventHandler<HTMLElement>` | - | Колбек обработки нажатия клавиши |
| onFocus | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки фокуса |
| onBlur | `FocusEventHandler<HTMLButtonElement \| HTMLAnchorElement>` | - | Колбек обработки блюра |
| type | "submit" \| "reset" \| "button" | button | HTML-аттрибут type |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
| ref | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
| key | `Key` | - |  |


[//]: DOCUMENTATION_SECTION_END
